<template>
  <GdUniDataPicker
    ref="uniDataPickerRef"
    v-model="tableRowData[componentMeta.key]"
    :localdata="componentMeta?.options ?? options"
    :popup-title="componentMeta?.componentAttr?.popupTitle ?? 'aaa'"
    :clear-icon="componentMeta?.componentAttr?.clearIcon ?? true"
    :map="computedMapBind"
    @change="(e) => onChange(e.detail.value)"
    @nodeclick="onNodeclick"
    @popupopened="onPopupopened"
    @popupclosed="onPopupclosed"
    :multiple="true"
  >
  </GdUniDataPicker>
</template>
<script setup>
import { computed, ref, watch } from "vue";
import {
  util_GetFlattenTree,
  util_GetAllParentArr,
  util_GetAllChildArr,
} from "@gd-accbuild-ui/gd-ui/utils";
import GdUniDataPicker from "@gd-accbuild-ui/gd-ui/mobile/gd-uni-data-picker/gd-uni-data-picker.vue";
const props = defineProps({
  componentMeta: {
    type: Object,
    default: () => ({}),
    required: true,
  },
  tableRowData: {
    type: Object,
    default: () => ({}),
  },
  rowIdx: {
    type: Number,
    default: 0,
  },
  tableColMetaList: {
    type: Array,
  },
});
const uniDataPickerRef = ref(null);
const options = ref([
  {
    text: "一年级",
    value: "1-0",
    hasChildren: true,
    children: [
      {
        text: "1.1班",
        value: "1-1",
        hasChildren: true,
        children: [
          {
            text: "1.1.1班",
            value: "1-1-1",
            hasChildren: false,
          },
        ],
      },
      {
        text: "1.2班",
        value: "1-2",
        hasChildren: false,
      },
    ],
  },
  {
    text: "二年级",
    value: "2-0",
    hasChildren: false,
  },
  {
    text: "三年级",
    value: "3-0",
    hasChildren: false,
  },
]);
const computedFlattenOptions = computed(() => {
  return util_GetFlattenTree(options.value);
});
const computedMapBind = computed(() => {
  return (
    props.componentMeta?.componentAttr?.map ?? { text: "text", value: "value" }
  );
});
const getValToText = (val) => {
  const textAlias = computedMapBind["text"];
  const valAlias = computedMapBind["value"];
  const matchedObj = computedFlattenOptions.value.find(
    (el) => el[valAlias] === val
  );
  return matchedObj[textAlias];
};
const curPickedBindVal = ref(undefined);
watch(
  [() => props.tableRowData, () => props.componentMeta.key],
  ([newTableRowData, newKey], [oldTableRowData, oldKey]) => {
    console.log(newTableRowData, newKey, "aaaaaaa");
    /* const bindVal = newTableRowData[newKey];
    if (Array.isArray(bindVal)) {
      curPickedBindVal.value = bindVal[bindVal.length - 1];
    } else {
      curPickedBindVal.value = bindVal;
    } */
  },
  { immediate: true, deep: true }
);
const bindVal = computed({
  get: () => props.tableRowData[props.componentMeta.key],
  set: (val) => {
    props.tableRowData[props.componentMeta.key] = val;
  },
});
//////////////
const defaultMulti = true;
watch(
  () => props.componentMeta,
  (newVal, oldVal) => {
    if (
      (newVal?.componentAttr?.multiple ?? defaultMulti) &&
      !Array.isArray(bindVal.value)
    ) {
      bindVal.value = [];
    }
  },
  { immediate: true, deep: true }
);
const isMulti = computed(() => {
  return (
    (props.componentMeta?.componentAttr?.multiple ?? defaultMulti) &&
    Array.isArray(bindVal.value)
  );
});
const emits = defineEmits(["change", "nodeclick"]);
const onChange = (val) => {
  emits("change", val);
};
const tempCurPickedBindVal = ref(null);
const onNodeclick = (node) => {
  emits("nodeclick", node);
  console.log(node, "节点点击了");
  if (node.hasChildren) {
    tempCurPickedBindVal.value = node.value;
  } else {
    appendValIntoBindVal(node.value);
  }
};
const onClickClose = (item, idx) => {
  if (item === null && idx === -1) {
    bindVal.value = [];
  }
  console.log("点击关闭标签");
};
const onClickContent = () => {
  console.log("点击插槽=====");
  uniDataPickerRef.value.show();
  //uniDataPickerRef.value.hide();
};
const onPopupopened = () => {
  //tempCurPickedBindVal.value = null;
};
const appendValIntoBindVal = (curPickedVal) => {
  if (curPickedVal) {
    if (isMulti.value) {
      const allParentArr = util_GetAllParentArr(options.value, curPickedVal, {
        childrenKeyAlias: "children",
        idKeyAlias: "value",
      });
      const allChildArr = util_GetAllChildArr(options.value, curPickedVal, {
        childrenKeyAlias: "children",
        idKeyAlias: "value",
      });
      const matchedBindVal = bindVal.value.filter((el) =>
        [...allParentArr, ...allChildArr].every((node) => node["value"] !== el)
      );
      bindVal.value = Array.from(new Set([...matchedBindVal, curPickedVal]));
    } else {
      bindVal.value = curPickedVal;
    }
  }
};
const onPopupclosed = () => {
  appendValIntoBindVal(tempCurPickedBindVal.value);
};
</script>
<style lang="scss" scoped></style>
